<template>
  <div class="tmpl">
<!-- 标题 -->
<div class="title" v-for="imgdata in message">
      <h3>{{ imgdata.title }}</h3>  
      <p class="otitle">
            {{ imgdata.add_time | fmtdate('YYYY-MM-DD') }}
            {{ imgdata.click }}次数
            分类：经济名声
        </p>
</div>
<!-- 用mui九宫格 -->
<div class=" ggui">
<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item, index) in imglist">
                        
                        <!-- <img src="http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg" alt=""> -->
                        <img class="preview-img"  :src="item.src" height="109" @click="$preview.open(index, imglist)">

                    </li>

                       <!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <img src="http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg" alt="">
                    </li>
                       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <img src="http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg" alt="">
                    </li>
                       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <img src="http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg" alt="">
                    </li> -->
                    
		        </ul> 

</div>
<div class="content"  v-for="imgdata in message" v-html="imgdata.content">
    
</div>


<!-- 使用评价组件 -->
    <div>
        
           <subcomment :artid="artid"></subcomment>  
    </div>



  </div>

</template>

<script>
//引用评论子组件
import subcomment from '../subcomp/subcomment.vue';
export default {
 		data(){
 			return{
                 imgdata:{},
                 imglist:[],
                 imgid:0,
                 artid:{},

            message:[{
                    // id:13,
                    click:21,
                    title:"中国各航空公司 波音公司预测了！",
                    add_time:"2017-9-9",
                    content:"<p>波音公司预测，中国各航空公司将在现在至2036年间购买7240架总价值高达1.1万亿美元的商用飞机。该飞机制造商在本周三就中国市场发布的全新的20年前景展望，较其此前的预期高出6.3%。波音表示这反映出该公司坚定看好中国市场前景</p>"
                            
             }],
                 imglist: [{
                    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505200816130&di=2313ab7fe2739178331549a9c1020bca&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0134eb56d6a40532f875520fd8b7de.gif',
                    w: 600,
                    h: 400
                    }, {
                    src: 'http://img1.imgtn.bdimg.com/it/u=578543291,3943368624&fm=27&gp=0.jpg',
                    w: 1200,
                    h: 900
                    }],
 				
 			
 			}
         }
         ,components:{
             subcomment
         }

        //  ,created(){
        //         this.getimgdata();
        //         this.getthumbimgs();
                    // this.imgid= this.$route.params.id;
        //  }
         
         ,methods:{
             getimgdata(){
                    // 获取到图片的id
                    let id = this.$route.params.id;
                    // 发出请求
                    let url = common.aplhost + '/api/getimageInfo/' + id;
                    this.$http.get(url).then(res=>{
                        this.imgdata = res.body.message[0];  
                    });
             },
            gethumbimgs(){
            // 获取到图片id
            let id = heis.$route.params.id;
            let url = common.apihost + '/api/getthumimages/' + id;
            let imghost = common.imghost;
            this.$http.get(url).then(res=>{
                res.body.message.forEach(item=>{
                    item.src = imghost + item.src;
                // 由于服务器没有返回图片搞和宽，动态添加一个宽高
                    // item.h=400;
                    // item.w=600;

                });
                    this.imglist = res.body.message;

            });


            }

		 }
 		
}
</script>

<style lang="scss" scoped>
.title{
    border-bottom: 2px solid #eeeeee;
}
.title h3{
    font-size: 18px;
    color: #0049ff;
    padding: 10px;
}
.title p{
    padding: 0 10px;
}

	// 定义9宫格图片样式
	.mui-content{
		background-color: #fff;
	}
.mui-grid-view.mui-grid-9{
    
	background-color: #fff;
	border-top: none;
    border-left:none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  
	border-right:none;
    border-bottom:none;
    padding: 5px;
	}
.mui-grid-view.mui-grid-9 .mui-table-view-cell img{
     width: 109px;
     height: 109px;
    }
.content{
    padding: 5px;
    font-size: 12px;
}    
</style>
